<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        form{
            width: 1000px;
            height: 600px;
            background: pink;
            background: -webkit-repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            background: -o-repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            background: -moz-repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            background: repeating-radial-gradient(#DC1010 5%,#90ED5A 10%,#2F57E8 15%);
            border-radius: 100%;
            margin: 0 auto;
        }
        .header{
            height: 120px;
            /* border-bottom: 1px solid rgb(160, 170, 154); */
            /* position: relative; */
            text-align: center;
            line-height: 120px;
        }
        h1{
            /* position: absolute;
            left:79px;
            top:40px; */
            text-shadow: 1px 1px 2px rgb(255, 238, 238), 0 0 25px rgb(166, 211, 224), 0 0 5px rgb(174, 174, 221);
        }
        .div-name{
            margin: 65px 70px 0 10px;
            /* font-weight: bold; */
            font-size: 20px;
        }
        .div-age{
            margin-left:50px
        }
        .div-pwd1 .div-pwd2{
            margin: 30px 70px 89px 0px;
            /* font-weight: bold; */
            font-size: 20px;
        }
        .div-pwd1{
            margin-left:8px
        }
        input{
            width: 717px;
            height: 74px;
            border-radius: 15px;
            outline: none;
            font-size: 20px;
            background: rgb(189, 186, 186);
            padding: 15px;
        }
        .send-btn{
            width: 161px;
            height: 60px;
            background: rgb(255, 255, 255) 0.1;
            color: rgb(255, 255, 255);
            border-radius: 9px;
            margin-left:420px;
            font-size: 35px;
            cursor: pointer;
            border: none;
        }
        .send-btn:hover{
            transform: scale(2);
        }
        .fa-exclamation-circle{
            color:red
        }
        .fa-check{
            color:rgb(0, 255, 8)
        }
        .sex{
            margin-left: 150px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <form>
        <div class="header"><h1>表单</h1></div>
        <div class="div-name">Your Name: <input type="text" class="input-name" placeholder="来 输入用户名！" name="username"></div>
        <div class="div-pwd1">Your Password: <input type="password" class="input-pwd1" placeholder="来 输入密码！" name="password1"></div>
        <div class="div-pwd2">Reset Password: <input type="password" class="input-pwd2" placeholder="来 重新输入密码！" name="password2"></div>
        <div class="div-age">Your Age:<input type="text" class="input-age" placeholder="来 输入年龄！" name="age"></div>
        <select class="sex">
            <option value="1">男</option>
            <option value="0">女</option>
        </select>
        <button disabled class="send-btn">Send</button>
    </form>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        var nameEle = document.querySelector('.input-name')
        var pwdEle1 = document.querySelector('.input-pwd1')   
        var pwdEle2 = document.querySelector('.input-pwd2')   
        var ageEle = document.querySelector('.input-age') 

        var sexEle = document.querySelector('.sex')
        var sidEle = sexEle.selectedIndex;
        console.log()

        var sendEle = document.querySelector('.send-btn')

        var div_nameEle = document.querySelector('.div-name')
        var div_pwdEle1 = document.querySelector('.div-pwd1')
        var div_pwdEle2 = document.querySelector('.div-pwd2')
        var div_ageEle = document.querySelector('.div-age')

        var pwdFlag1 = false
        var pwdFlag2 = false
        var nameFlag = false
        var ageFlag = false
        ageEle.onblur = function(){
            var str = ageEle.value
            if(str){
                if((str <= 120)&&(str>0)){
                    ageFlag = true;
                }else{
                    alert('年龄不合格')
                    ageFlag = false;

                }
                sendEle.disabled = !(nameFlag&&pwdFlag1&&pwdFlag2&&ageFlag)
            }else{
                alert('年龄不合格')
                ageFlag = false;
                sendEle.disabled = !(nameFlag&&pwdFlag1&&pwdFlag2&&ageFlag)
            }
        }



        pwdEle1.onblur = function(){
            var reg = /^([a-zA-Z0-9_]){8,15}$/
            var str = pwdEle1.value
            var result = reg.test(str)
            if(result){
                var warningEle1 = document.querySelector('.warning-pwd')
                pwdFlag1 = true

                if(warningEle1){
                    warningEle1.remove()
                }
            }else{
                var warningEle1 = document.querySelector('.warning-pwd')
                pwdFlag1 = false
                if(!warningEle1){
                    var ele = document.createElement('div')
                    ele.innerHTML = "<i class='fa fa-exclamation-circle'>密码格式错误,Password的长度不小于8位,不大于15位</i>"
                    ele.setAttribute('class','warning-pwd')
                    
                    div_pwdEle1.appendChild(ele)
                }
            }
            sendEle.disabled = !(nameFlag&&pwdFlag1&&pwdFlag2&&ageFlag)
        }
        pwdEle2.onblur = function(){
            var reg = /^([a-zA-Z0-9_]){8,15}$/
            var str = pwdEle2.value
            var result = reg.test(str)
            if(result){
                var warningEle2 = document.querySelector('.warning-pwd')
                pwdFlag2 = true
                if(warningEle2){
                    warningEle2.remove()
                }
            }
            else{
                var warningEle2 = document.querySelector('.warning-pwd')
                pwdFlag2 = false
                if(!warningEle2){
                    var ele = document.createElement('div')
                    ele.innerHTML = "<i class='fa fa-exclamation-circle'>密码格式错误,Password的长度不小于8位,不大于15位</i>"
                    ele.setAttribute('class','warning-pwd')
                    div_pwdEle2.appendChild(ele)
                }
            }
            sendEle.disabled = !(nameFlag&&pwdFlag1&&pwdFlag2&&ageFlag)
        }


        nameEle.onblur = ()=>{
            var str = nameEle.value
            if(str){
                var reg = /^[\u4e00-\u9fa5a-zA-Z0-9_-]{4,16}$/
                var result = reg.test(str)
                if(result){
                    $.ajax({
                    type:'get',
                    url:'http://localhost:3000/checkNameDup',
                    data:{
                        username:str
                    },
                    success:(data)=>{
                        if(data){
                            nameFlag = false;
                            alert('重名')
                        }else{
                            nameFlag = true;
                        }
                        sendEle.disabled = !(nameFlag&&pwdFlag1&&pwdFlag2&&ageFlag)
                    }
                })
                }else{
                    alert('用户名不合格')
                    nameFlag = false;
                    sendEle.disabled = !(nameFlag&&pwdFlag1&&pwdFlag2&&ageFlag)
                }
            }else{
                alert('用户名不合格')
                nameFlag = false;
                sendEle.disabled = !(nameFlag&&pwdFlag1&&pwdFlag2&&ageFlag)
            }
        }

        sendEle.onclick =()=>{
            $.ajax({
                type:'get',
                url:'http://localhost:3000/regist',
                data:{
                    name:nameEle.value,
                    password1:pwdEle1.value,
                    password2:pwdEle2.value,
                    age:ageEle.value
                },
                success:(data)=>{
                    if(data.status){
                        location.href = `http://localhost:3000/userinfo?name=${nameEle.value}&age=${nameEle.value}`
                    }else{
                        alert(data.message)
                    }
                }
            })
        }
    </script>
</body>
</html>